<template>
    <div class="register-container">
      <el-card class="register-form">
        <div class="logo">
            <img src="../img/yz.webp" alt="永泽游戏网" />
            <span class="yz">欢迎使用永泽游戏网</span>
            </div>
        <div slot="header" class="register-header">
            <h2>新用户注册</h2>
        </div>
        <el-form :model="registerForm" :rules="registerRules" ref="registerFormRef" label-width="100px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="registerForm.name" placeholder="请输入姓名" />
          </el-form-item>
  
          <el-form-item label="用户名" prop="username">
            <el-input v-model="registerForm.username" placeholder="请输入用户名" />
          </el-form-item>
  
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="registerForm.phone" placeholder="请输入手机号" />
          </el-form-item>
  
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="registerForm.sex">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
  
          <el-form-item label="身份证号" prop="idNumber">
            <el-input v-model="registerForm.idNumber" placeholder="请输入身份证号" />
          </el-form-item>
  
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="registerForm.password"
              placeholder="请输入密码"
            />
          </el-form-item>
  
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
              type="password"
              v-model="registerForm.confirmPassword"
              placeholder="请确认密码"
            />
          </el-form-item>
  
          <el-form-item>
            <el-button type="primary" @click="handleRegister">注册</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref } from "vue";
  import { useRouter } from "vue-router";
  import { ElMessage } from "element-plus";
  import request from "../axios/request.js";  
import { reactive } from "vue";
  const router = useRouter();
  
  const registerForm = reactive({
    name: '',
    username: '',
    phone: '',
    sex: '男',
    idNumber: '',
    password: '',
    confirmPassword: '',
  });
  
  // 确认密码验证函数
  const validateConfirmPassword = (rule, value, callback) => {
    if (value !== registerForm.password) {
      callback(new Error("两次密码输入不一致"));
    } else {
      callback();
    }
  };

  const registerRules = {
    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    username: [
      { required: true, message: "请输入用户名", trigger: "blur" },
      { min: 3, max: 15, message: "用户名长度在 3 到 15 个字符之间", trigger: "blur" },
    ],
    phone: [
      { required: true, message: "请输入手机号", trigger: "blur" },
      { pattern: /^[1][3-9][0-9]{9}$/, message: "请输入有效的手机号", trigger: "blur" },
    ],
    sex: [{ required: true, message: "请选择性别", trigger: "change" }],
    idNumber: [
      { required: true, message: "请输入身份证号", trigger: "blur" },
      { pattern: /^\d{17}(\d|X|x)$/, message: "请输入有效的身份证号", trigger: "blur" },
    ],
    password: [
      { required: true, message: "请输入密码", trigger: "blur" },
      { min: 6, max: 20, message: "密码长度在 6 到 20 个字符之间", trigger: "blur" },
    ],
    confirmPassword: [
      { required: true, message: "请确认密码", trigger: "blur" },
      { validator: validateConfirmPassword, trigger: "blur" },
    ],
  };
  
  const registerFormRef = ref();

  const handleRegister = () => {
    // 表单验证
    const form = registerFormRef.value;
    form.validate((valid) => {
      if (valid) {
        // 发起注册请求
        request({
          url: 'http://backend.yzyxw.cpolar.top/login/save', // 替换为你的注册接口
          method: 'post',
          data:{
            "name": registerForm.name,
            "username": registerForm.username,
            "password": registerForm.password,
            "phone": registerForm.phone,
            "sex": registerForm.sex,
            "idNumber": registerForm.idNumber
          }
        })
          .then((response) => {
            if (response.data.code === 200) {
              ElMessage({
                message: "注册成功",
                type: "success",
              });
              router.push("/");
            } else {
              ElMessage({
                message: "注册失败，请检查信息",
                type: "error",
              });
            }
          })
          .catch((error) => {
            ElMessage({
              message: "请求失败，请检查网络连接",
              type: "error",
            });
          });
      } else {
        ElMessage({
          message: "表单验证失败",
          type: "error",
        });
      }
    });
  };
  </script>
  
  <style scoped>
  .logo {
  display: flex;
  align-items: center;
  gap: 15px; /* 图片和文字的间距 */
}

/* Logo 图片样式 */
.logo img {
  height: 60px; /* 图片高度 */
  width: auto;  /* 等比例缩放宽度 */
}

/* 欢迎文字样式 */
.logo .yz {
  font-size: 2.4rem; /* 字体大小 */
  font-weight: bold; /* 加粗字体 */
  color: black; 
}

  .register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(to right, #1e3c72, #2a5298);
  }
  
  .register-form {
    width: 400px;
  }
  
  .register-header {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }

  </style>
  